<template>
  <view class="home">
    <!-- 卡片 -->
    <view class="wrap">
      <view class="card-wrap" style="margin-bottom: 10px;">
        <view :class="[`colBg border${index+1}`]" v-for="(item, index) in cardList" :key="index">
          <view>今日{{ item.title }}{{ item.title == '过磅次数' ? '（次）' : '（kg）' }}</view>
          <view class="pad">{{ item.curDay }}</view>
        </view>
      </view>
    </view>
    <!-- 快捷方式 -->
    <view class="title">
      <view class="titleBor">
        <text class="line"></text>
        <text>快捷方式</text>
      </view>
    </view>
    <view class="fastType">
      <navigator :url="item.path" v-for="(item, index) in linkList" :key="index">
        <view class="fastBut">
          <u-icon :name="item.icon" :color="item.iconColor" size="66"></u-icon>
          <view>{{ item.title }}</view>
        </view>
      </navigator>
    </view>
    <!-- 统计 -->
    <view class="chart-box">
      <view class="title">
        <view class="titleBor">
          <text class="line"></text>
          <text>发货统计</text>
        </view>
      </view>
      <view class="" style="width: 95%;margin: 0 auto;">
        <view class="qiun-charts">
          <qiun-data-charts class="charts" type="line" :chartData="faHuoChartData" background="none" :opts="opts" />
        </view>
      </view>
    </view>
    <view class="chart-box">
      <view class="title">
        <view class="titleBor">
          <text class="line"></text>
          <text>采购统计</text>
        </view>
      </view>
      <view class="" style="width: 95%;margin: 0 auto;">
        <view class="qiun-charts">
          <qiun-data-charts class="charts" type="line" :chartData="caiGouChartData" background="none" :opts="opts" />
        </view>
      </view>
    </view>
    <view class="chart-box">
      <view class="title">
        <view class="titleBor">
          <text class="line"></text>
          <text>生产统计</text>
        </view>
      </view>
      <view class="" style="width: 95%;margin: 0 auto;">
        <view class="qiun-charts">
          <qiun-data-charts class="charts" type="line" :chartData="shenChanChartData" background="none" :opts="opts" />
        </view>
      </view>
    </view>
    <view style="width: 100%;height:var(--window-bottom);"></view>
  </view>
</template>

<script>
import { getList, getFaHuoChart, getCaiGouChart, getShengChanChart } from '@/api/home.js';

import uCharts from '@/js_sdk/u-charts/u-charts.js';
import cfu from '@/js_sdk/u-charts/config-ucharts.js';
// #ifdef APP-VUE || H5
import cfe from '@/js_sdk/u-charts/config-echarts.js';
// #endif

export default {
  data() {
    return {
      cardList: [],
      linkList: [
        {
          icon: 'empty-search',
          iconColor: '#0062AD',
          title: '发货订单',
          path: '/pages/templatePage/tableAndList?menuTitle=发货订单&menuId=1181&modelId=110'
        },
        {
          icon: 'empty-car',
          iconColor: '#0062AD',
          title: '采购订单',
          path: '/pages/templatePage/tableAndList?menuTitle=采购订单&menuId=1188&modelId=134'
        },
        {
          icon: 'calendar',
          iconColor: '#0062AD',
          title: '采购记录',
          path: '/pages/templatePage/tableAndList?menuTitle=采购记录&menuId=1195&modelId=139'
        },
        {
          icon: 'order',
          iconColor: '#0062AD',
          title: '销售出库',
          path: '/pages/templatePage/tableAndList?menuTitle=销售出库&menuId=1209&modelId=140'
        },
        {
          icon: 'file-text',
          iconColor: '#0062AD',
          title: '生产记录',
          path: '/pages/templatePage/tableAndList?menuTitle=生产记录&menuId=1221&modelId=124'
        },
        {
          icon: 'empty-order',
          iconColor: '#0062AD',
          title: '销售合同',
          path: '/pages/templatePage/tableAndList?menuTitle=销售合同&menuId=1166&modelId=109'
        }
      ],
      opts: {
        padding: [20, 0, 0, 0],
        dataLabel: false,
        xAxis: {
          disableGrid: true,
          rotateLabel: true
        },
        yAxis: {
          showTitle: false,
          data: [
            {
              type: 'value',
              position: 'left',
              disabled: false,
              axisLine: true,
              axisLineColor: '#CCCCCC',
              calibration: false,
              fontColor: '#666666',
              fontSize: 13,
              textAlign: 'right',
              title: '单位：kg',
              titleFontSize: 13,
              titleOffsetY: -10,
              titleOffsetX: 0,
              titleFontColor: '#666666',
              unit: ' kg'
            }
          ]
        },
        legend: {
          padding: 20
        },
        // dataPointShape:false,
        extra: {
          line: {
            type: 'curve'
          }
        }
      },
      // 图表数据
      faHuoChartData: {
        categories: [],
        series: []
      },
      caiGouChartData: {
        categories: [],
        series: []
      },
      shenChanChartData: {
        categories: [],
        series: []
      }
    };
  },
  onShow() {
    this.getCrudList();
    this.getFaHuoChart();
    this.getCaiGouChart();
    this.getShengChanChart();
  },
  onReady() {},
  methods: {
    // 卡片数据
    async getCrudList() {
      const {
        data: { data }
      } = await getList();
      this.cardList = data;
    },
    //发货统计 数据处理
    async getFaHuoChart() {
      const {
        data: { data }
      } = await getFaHuoChart();
      this.faHuoChartData.categories = data.map(item => item.day);
      const series = [];
      let obj = {
        name: '发货',
        data: data.map(item => item.total)
      };
      series.push(obj)
      this.faHuoChartData.series = series;
    },
    //采购统计 数据处理
    async getCaiGouChart() {
      const {
        data: { data }
      } = await getCaiGouChart();
      this.caiGouChartData.categories = data.map(item => item.day);
      const series = [];
      let obj = {
        name: '采购',
        data: data.map(item => item.total)
      };
      series.push(obj)
      this.caiGouChartData.series = series;
    },
    //生产统计 数据处理
    async getShengChanChart() {
      const {
        data: { data }
      } = await getShengChanChart();
      this.shenChanChartData.categories = data.map(item => item.day);
      const series = [];
      let obj = {
        name: '生产',
        data: data.map(item => item.total)
      };
      series.push(obj)
      this.shenChanChartData.series = series;
    }
  }
};
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  background: #eaebef;

  .wrap {
    width: 95%;
    margin: 0 auto;
    padding-top: 10px;
    .card-wrap {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .colBg {
        width: 340rpx;
        background: #fff;
        padding: 7.5px 0px;
        margin-bottom: 16rpx;

        view {
          padding-left: 10px;
        }

        .pad {
          padding-top: 5px;
          font-weight: bold;
          font-size: 18px;
        }
      }
    }

    .border1 {
      border-left: 5px solid #0062ad;
      box-shadow: 0px 3px 10px 0px rgba(0, 98, 173, 0.08);
    }

    .border2 {
      border-left: 5px solid #0284dc;
      box-shadow: 0px 3px 10px 0px rgba(0, 98, 173, 0.08);
    }

    .border3 {
      border-left: 5px solid #3071ff;
      box-shadow: 0px 3px 10px 0px rgba(0, 98, 173, 0.08);
    }

    .border4 {
      border-left: 5px solid #01b7fa;
      box-shadow: 0px 3px 10px 0px rgba(0, 98, 173, 0.08);
    }
  }

  .title {
    background-color: #fff;
    margin-top: 10px;
    padding: 10px 0;

    .titleBor {
      width: 95%;
      margin: 0 auto;
      padding: 0 4px;
      font-weight: 400;
      color: #333333;

      .line {
        display: inline-block;
        width: 3px;
        height: 15px;
        background: #0062ad;
        border-radius: 3px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }

  .fastType {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding-bottom: 10px;
    // box-shadow: 0px 3px 10px 0px rgba(0, 98, 173, 0.08);

    .fastBut {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 246rpx;
      padding: 5px 0;
      border: 1px solid #ecedef;
      view {
        padding-top: 10rpx;
      }
    }
  }
}

/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
  width: 100%;
  height: 270px;
  background-color: #ffffff;
}

.charts {
  width: 100%;
  height: 270px;
  background-color: #ffffff;
}
.chart-box {
  width: 100%;
  box-shadow: 0px 3px 10px 0px rgba(0, 98, 173, 0.08);
  background: #fff;
}
</style>
